&lt;template&gt;
  &lt;div class="stream-container"&gt;
    &lt;el-card class="box-card"&gt;
      &lt;div class="input-area"&gt;
        &lt;el-input
          v-model="message"
          placeholder="请输入消息"
          :disabled="loading"
          @keyup.enter="sendMessage"
        &gt;
          &lt;template #append&gt;
            &lt;el-button :loading="loading" @click="sendMessage"&gt;发送&lt;/el-button&gt;
          &lt;/template&gt;
        &lt;/el-input&gt;
      &lt;/div&gt;

      &lt;div class="response-area" ref="responseArea"&gt;
        &lt;div class="response-content"&gt;{{ response }}&lt;/div&gt;
      &lt;/div&gt;

      &lt;div class="log-area"&gt;
        &lt;div v-for="(log, index) in logs" :key="index" :class="log.type"&gt;
          {{ log.timestamp }} - {{ log.message }}
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/el-card&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script setup&gt;
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'

const message = ref('')
const response = ref('')
const loading = ref(false)
const logs = ref([])
let eventSource = null

const addLog = (message, type = 'info') =&gt; {
  const timestamp = new Date().toLocaleTimeString()
  logs.value.unshift({ message, type, timestamp })
}

const connect = () =&gt; {
  try {
    if (eventSource) {
      eventSource.close()
    }

    addLog('开始建立 SSE 连接...')
    eventSource = new EventSource('/api/chatTl')

    eventSource.onopen = () =&gt; {
      addLog('SSE 连接已建立', 'success')
    }

    eventSource.onmessage = (event) =&gt; {
      const data = event.data.replace(/^data:\s*/, '')
      response.value += data
      addLog(`收到数据: ${data}`)
    }

    eventSource.onerror = (error) =&gt; {
      addLog(`SSE 连接错误: ${error}`, 'error')
      eventSource.close()
      loading.value = false
    }
  } catch (error) {
    addLog(`连接出错: ${error.message}`, 'error')
    loading.value = false
  }
}

const sendMessage = async () =&gt; {
  if (!message.value.trim()) {
    ElMessage.warning('请输入消息')
    return
  }

  try {
    loading.value = true
    response.value = ''
    addLog(`发送消息: ${message.value}`)
    
    // 重新建立连接
    connect()
    
    // 这里可以根据需要发送消息到服务器
    message.value = ''
  } catch (error) {
    addLog(`发送消息出错: ${error.message}`, 'error')
    loading.value = false
  }
}

onMounted(() =&gt; {
  addLog('组件已加载')
})

onUnmounted(() =&gt; {
  if (eventSource) {
    eventSource.close()
    addLog('关闭 SSE 连接')
  }
})
&lt;/script&gt;

&lt;style scoped&gt;
.stream-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 0 20px;
}

.input-area {
  margin-bottom: 20px;
}

.response-area {
  min-height: 200px;
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 20px;
  background-color: #f8f9fa;
}

.response-content {
  white-space: pre-wrap;
  word-wrap: break-word;
}

.log-area {
  max-height: 200px;
  overflow-y: auto;
  font-family: monospace;
  font-size: 12px;
}

.log-area &gt; div {
  padding: 2px 5px;
  border-bottom: 1px solid #eee;
}

.info {
  color: #606266;
}

.success {
  color: #67c23a;
}

.error {
  color: #f56c6c;
}
&lt;/style&gt;
